<template>
  <div class="height-full issue-direct">
    <DirectiveOperation v-if="from === 'detail'" :view-details="viewDetails" @on-refresh-info="getCommandInfo(id)"></DirectiveOperation>
    <div class="back-white height-full pb50 pt10 over-hidden">
      <DirectContent
        ref="DirectContent"
        :view-details="viewDetails"
        @on-directive-type-Change="handleDirectiveTypeChange"
      ></DirectContent>
      <FeedbackTemplate
        ref="FeedbackTemplate"
        :view-details="viewDetails"
        :current-directive-type="currentDirectiveType"
        @on-template-change="handleFbTemChange"
      ></FeedbackTemplate>
      <StatRequire ref="StatRequire" class="mt30" :view-details="viewDetails"></StatRequire>
      <DirectiveInfo
        ref="DirectiveInfo"
        class="mt30"
        :view-details="viewDetails"
        :current-fb-tem="currentFbTem"
      ></DirectiveInfo>
      <IssueRange ref="IssueRange" class="mt30" :view-details="viewDetails"></IssueRange>

      <div class="text-center mt30">
        <Button class="mr10 ivu-btn--round" @click="$router.back()">关闭</Button>
        <Button type="primary" class="ivu-btn--round" @click="handleIssue" :disabled="isDetails">下发</Button>
      </div>
    </div>
  </div>
</template>

<script>
// components
import DirectiveOperation from './components/DirectiveOperation.vue'
import DirectContent from './components/DirectContent.vue'
import FeedbackTemplate from './components/FeedbackTemplate.vue'
import StatRequire from './components/StatRequire.vue'
import DirectiveInfo from './components/DirectiveInfo.vue'
import IssueRange from './components/IssueRange.vue'

//uitls
import { objectToFormData, handleRequestStatus } from '@/utils/uitls.js'
import { eleHightToggle } from '@/utils/dom.js'

// request
import { postDirectiveAdd, getCommandInfo, postDirectiveUpdate } from '@/api/common/IssueDirective/index.js'

export default {
  name: 'IssueDirective',

  components: { DirectiveOperation, DirectContent, FeedbackTemplate, StatRequire, DirectiveInfo, IssueRange },

  data() {
    return {
      currentDirectiveType: {},
      currentFbTem: {},

      directiveInfo: {},
    }
  },

  computed: {
    from() {
      return this.$route.query.f
    },
    id() {
      return this.$route.query.id
    },
    isDetails() {
      return this.from === 'detail' && Boolean(this.id)
    },
    viewDetails() {
      return { isDetails: this.isDetails, info: this.directiveInfo }
    },
  },

  methods: {
    moduleHeightToggle(context, module) {
      const ref = context.$refs[module + '_ref']
      const ele = ref instanceof HTMLElement ? ref : context.$refs[module + '_ref'].$el
      if (!ele) return
      eleHightToggle(ele, context.visible[module])

      context.visible[module] = !context.visible[module]
    },

    handleDirectiveTypeChange(type) {
      this.currentDirectiveType = type
    },

    handleFbTemChange(item) {
      this.currentFbTem = item
    },

    async handleIssue() {
      /* 表单验证 */
      const isValid = await this.$refs['DirectContent'].handleFormSubmit()
      if (!isValid) {
        this.$Message.error('有必填项未填写')
        return console.warn('[directiveIssue warn] The form has required fields not filled in')
      }

      const issueRange_validate = this.$refs['IssueRange'].validator()
      if (!issueRange_validate) {
        this.$Message.error('下发范围为必选项')
        return
      }

      this.$Spin.show()
      const params = {}
      const refs = ['DirectContent', 'FeedbackTemplate', 'StatRequire', 'DirectiveInfo', 'IssueRange']
      for (let i = 0, len = refs.length; i < len; i++) {
        const it = refs.at(i)
        const ref = this.$refs[it]
        if (typeof ref.getParams === 'function') {
          const obj = ref.getParams()
          Object.assign(params, obj)
        }
      }
      const data = {
        file: params.file,
      }
      delete params.file

      // console.log(params, data)
      // return
      if (this.isDetails) {
        await this.postDirectiveUpdate(this.directiveInfo.id, params, objectToFormData(data))
      } else {
        await this.postDirectiveAdd(params, objectToFormData(data))
      }

      this.$Spin.hide()
      // this.$router.back()
    },

    async postDirectiveAdd(params, data) {
      const res = await postDirectiveAdd(params, data)
      // console.log('postDirectiveAdd', res)
      handleRequestStatus(res, '下发', () => {
        this.$router.back()
      })
    },

    async postDirectiveUpdate(id, params, data) {
      const res = await postDirectiveUpdate(id, params, data)
      handleRequestStatus(res, '下发', () => {
        this.$router.back()
      })
    },

    async getCommandInfo(id) {
      const res = await getCommandInfo(id)
      if (res.data.status !== 0) return (this.directiveInfo = {})
      this.directiveInfo = res.data.data || {}
    },
  },

  mounted() {
    if (this.isDetails) {
      this.getCommandInfo(this.id)
    }
  },
}
</script>

<style lang="less" scoped>
.issue-direct {
  /deep/ .ivu-table:before {
    background-color: #f0f0f0;
  }
}
.custom-ivu-form {
  width: 90%;
}

.upload-box {
  width: 420px;
  padding: 4px 10px 4px 2px;
  border: 1px solid;
  border-color: #e9eef2;
  border-radius: 4px;

  /deep/ .ivu-upload-list {
    margin-top: 0;
  }
}
</style>
